<%@ page import="team.bluepen.supermarket.data.entity.User" %>
<%@ page import="team.bluepen.supermarket.constant.Constant" %>
<%@ page import="team.bluepen.supermarket.constant.Role" %>
<%@ page import="java.util.List" %>
<%@ page import="team.bluepen.supermarket.data.entity.Good" %>
<%@ page import="java.util.ArrayList" %>
<%@ page import="team.bluepen.supermarket.data.dao.GoodRepository" %>
<%@ page import="team.bluepen.supermarket.data.entity.Qualify" %>
<%@ page import="team.bluepen.supermarket.data.dao.GoodRepository" %>
<%@ page import="java.util.Collections" %>
<%@ page import="team.bluepen.supermarket.util.StringUtil" %>
<%@ page import="team.bluepen.supermarket.data.dao.LongBytesConverter" %>
<%@ page import="team.bluepen.supermarket.data.dao.StringBytesConverter" %>
<%@ page import="team.bluepen.supermarket.constant.Error" %>
<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>
    <%!
        GoodRepository goodRepository = new GoodRepository();
        List<Good> goods = new ArrayList<>();
    %>

    <%
        User user = (User) request.getSession().getAttribute(Constant.SESSION_USER);

    %>
<%--    商品查询页面 --%>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="shortcut icon" href="${pageContext.request.contextPath}/images/icon.ico" type="/image/x-icon" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css">
    <script src="${pageContext.request.contextPath}/js/bootstrap.bundle.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/main.css">
    <title>Query - Supermarket Manage System</title>
</head>
<body>
<main>
    <%
        String state = request.getParameter("error");
        Error error = Error.getErrorByText(state);
    %>
    <%  if (error != null && !error.getState()) {%>
    <script>alert('Data error!\n<%=error%>')</script>
    <%
        }
    %>
<div class="d-flex flex-column flex-shrink-0 p-3 bg-light" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1" style="width: 20%;min-width: 150px">
    <a href="${pageContext.request.contextPath}/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-dark text-decoration-none">
        <span class="fs-4">Supermarket Manage System</span>
    </a>
    <hr>
    <ul class="nav nav-pills flex-column mb-auto">
        <li class="nav-item">
            <a href="overview.jsp" class="nav-link link-dark" aria-current="page">
                Overview
            </a>
        </li>
        <%
            if (user != null && user.getRole() == Role.ADMIN) {
        %>
        <li>
            <a href="account.jsp" class="nav-link link-dark">
                Accounts
            </a>
        </li>

        <%
            }
        %>
        <li>
            <a href="manage.jsp" class="nav-link link-dark">
                All Goods
            </a>
        </li>
        <li>
            <a href="query.jsp" class="nav-link active">
                Goods Query
            </a>
        </li>
        <li>
            <a href="file.jsp" class="nav-link link-dark">
                File
            </a>
        </li>
    </ul>
    <hr>
    <div class="dropdown">
        <a href="#" class="d-flex align-items-center link-dark text-decoration-none dropdown-toggle" id="dropdownUser2" data-bs-toggle="dropdown" aria-expanded="false">
            <strong><%=user.getUsername()%></strong>
        </a>
        <ul class="dropdown-menu text-small shadow" aria-labelledby="dropdownUser2">
            <li><a class="dropdown-item" href="setting.jsp">Settings</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><form method="post" action="api/logout-control">
                <button class="dropdown-item" type="submit" value="logout" name="logout">Logout</button>
            </form></li>
        </ul>
    </div>
</div>
    <div class="d-flex flex-column p-4 flex-grow-1 allow-rolling">
        <h1 class="flex-column">Query Goods</h1>
        <div class="d-flex flex-xl-row">
        <form name="query_form" method="post" action="query.jsp">
            <div class="d-flex flex-column p-4">
                <div class="d-flex flex-sm-row">
                    <div class="input-group">
                        <input class="form-control text-input" type="text" name="good_param" id="good_param_input" placeholder="*Query content">
                    </div>
                </div>
                <div class="d-flex flex-row">
                    <label>
                        Query Qualifier
                        <select class="form-select" name="qualifier">
                            <option value ="<%=Constant.GoodTable.QUALIFIER_ID%>">Goods' ID</option>
                            <option value ="<%=Constant.GoodTable.QUALIFIER_NAME%>">Goods' Name</option>
                        </select>
                    </label>
                    <label>
                        Good Status
                        <select class="form-select" name="good_status">
                            <option value ="all">All</option>
                            <option value ="U">On-Shelf</option>
                            <option value ="G">Off-Shelf</option>
                        </select>
                    </label>
                    <div style="user-select: none"><br><br><br><br></div>
                </div>
                <div class="d-flex flex-row-reverse">
                    <div class="btn-group">
                        <button class="btn btn-outline-primary" type="submit" id="btn_query" name="query" >Query</button>
                        <button class="btn btn-outline-secondary" type="reset" id="btn_reset">Reset</button>
                        <button class="btn btn-outline-primary" type="button" data-bs-toggle="modal" data-bs-target="#add_good">Add</button>
                    </div>
                </div>
            </div>
        </form>
            <div class="d-flex flex-xl-row p-4 flex-grow-1">
                <div class="d-flex flex-xl-column flex-grow-1">
                    <table class="table table-hover">
                        <caption>Goods</caption>
                        <thead class="table table-hover"><tr>
                            <td>ID</td>
                            <td>Name</td>
                            <td>Amount</td>
                            <td>Price</td>
                            <td>Status</td>
                            <td>Action</td>
                        </tr></thead>
                        <tbody>
                        <%
                            String query = request.getParameter("query");
                            String param = request.getParameter("good_param");
                            String type = request.getParameter("qualifier");
                            String status = request.getParameter("good_status");
                        %>
                        <%
                            if (query != null) {
                                goods.clear();
                                Qualify valueQualify;
                                if (!StringUtil.isEmpty(param) && type.equals(Constant.GoodTable.QUALIFIER_ID)) {
                                    try {
                                        valueQualify = new Qualify().setFamily(Constant.GoodTable.TABLE_FAMILY_1)
                                                .setQualifier(type).setValue(Long.parseLong(param))
                                                .setBytesConverter(LongBytesConverter.INSTANCE);
                                    } catch (NumberFormatException e) {
                                        valueQualify = null;
                                    }
                                } else {
                                    valueQualify = new Qualify().setFamily(Constant.GoodTable.TABLE_FAMILY_1)
                                            .setQualifier(type).setValue(param)
                                            .setBytesConverter(StringBytesConverter.INSTANCE);
                                }
                                List<Qualify> qualifies = new ArrayList<>(Collections.singletonList(valueQualify));
                                if (!status.equalsIgnoreCase("all")) {
                                    Qualify statusQualify = new Qualify().setFamily(Constant.GoodTable.TABLE_FAMILY_2)
                                            .setQualifier(Constant.GoodTable.QUALIFIER_STATE).setValue(status);
                                    qualifies.add(statusQualify);
                                }
                                goods.addAll(goodRepository.multiQuery(qualifies));
                            }
                        %>
                        <%for(Good good : goods){%>
                        <tr>
                            <td><%=good.getId()%></td>
                            <td><%=good.getName()%></td>
                            <td><%=good.getAmount()%></td>
                            <td><%=good.getPrice()%></td>
                            <td><%=good.getState()%></td>
                            <td>
                                <div class="btn-group">
                                    <button type="button" class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#edit_good"
                                            data-bs-goodrow="<%=good.getRow()%>" data-bs-goodid="<%=good.getId()%>" data-bs-goodname="<%=good.getName()%>">Edit</button>
                                    <button type="button" class="btn btn-outline-danger" data-bs-toggle="modal" data-bs-target="#delete_good" data-bs-goodrow="<%=good.getRow()%>"
                                            data-bs-goodid="<%=good.getId()%>" data-bs-goodname="<%=good.getName()%>">Delete</button>
                                </div>
                            </td>
                        </tr>
                        <%}%>
                        </tbody>
                    </table>
                </div>
            </div>
    </div>
    </div>


    <div class="modal fade" id="add_good">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Add Goods</h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <form action="api/good-add" method="post" name="add_good_form">
                    <div class="modal-body">
                        <input type="text" hidden id="good_row_add" name="good_row">
                        <div class="alert alert-warning">
                            Notice:
                            <br>
                            Price and amount cannot be negative number, if so, it will be transferred to 0.
                        </div>
                            <label>
                                ID
                                <input class="form-control"  type="text" name="good_id" placeholder="Enter good's id...">
                            </label>
                            <label>
                                Name
                                <input class="form-control" type="text" name="good_name" placeholder="Enter good's name...">
                            </label>
                            <label>
                                Amount
                                <input class="form-control" type="number" name="good_amount" placeholder="Enter good's amount...">
                            </label>
                            <label>
                                Price
                                <input class="form-control" type="number" name="good_price" placeholder="Enter good's price...">
                            </label>
                            <label>
                                Status
                                <select class="form-select" name="good_status">
                                    <option value ="u">On-Shelf</option>
                                    <option value ="d">Off-Shelf</option>
                                </select>
                            </label>
                    </div>

                    <div class="modal-footer">
                        <div class="btn-group">
                            <button type="submit" class="btn btn-primary" data-bs-dismiss="modal">Add</button>
                            <button type="reset" class="btn btn-outline-secondary">Reset</button>
                            <button type="button" class="btn btn-outline-primary" data-bs-dismiss="modal">Cancel</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="delete_good">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Delete Goods</h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <form action="api/good-delete" method="post" name="delete_good_form">
                    <div class="modal-body">
                        <input type="text" hidden id="delete_good_row" name="good_row">
                        <input type="text" hidden name="type" value="good">
                        <div class="alert alert-danger">
                            Notice:
                            <br>
                            <STRONG>It will be deleted in database, please check it again.</STRONG>
                        </div>
                        <p id="current_good_delete"></p>
                    </div>

                    <div class="modal-footer">
                        <div class="btn-group">
                            <button type="submit" class="btn btn-danger" data-bs-dismiss="modal">Delete</button>
                            <button type="button" class="btn btn-outline-primary" data-bs-dismiss="modal">Cancel</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>


    <div class="modal fade" id="edit_good">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Edit Goods</h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <form action="api/good-edit" method="post" name="edit_good_form">
                    <div class="modal-body">
                        <input type="text" hidden id="edit_good_row" name="good_row">
                        <div class="alert alert-warning">
                            Notice:
                            <br>If you don't want to change the name of the good or anything else, please just leave it blank.
                            <br><br><strong>Also note: the status must be set manually, otherwise it will be set as on-shelf status.</strong>
                        </div>
                        <div class="alert alert-warning">
                            Notice:
                            <br>
                            Price and amount cannot be negative number, if so, it will be transferred to 0.
                        </div>
                        <p id="current_good_edit"></p>
                            <label>
                                Name
                                <input class="form-control text-input" type="text" name="good_name" placeholder="Enter a new name...">
                            </label>
                            <label>
                                Amount
                                <input class="form-control text-input" type="number" name="good_amount" placeholder="Enter the amount of the good...">
                            </label>
                            <label>
                                Price
                                <input class="form-control text-input" type="number" name="good_price" placeholder="Enter the price of the good...">
                            </label>
                            <label>
                                Status
                                <select class="form-select" name="good_status">
                                    <option value ="u">On-Shelf</option>
                                    <option value ="d">Off-Shelf</option>
                                </select>
                            </label>
                    </div>

                    <div class="modal-footer">
                        <div class="btn-group">
                            <button type="submit" class="btn btn-primary" data-bs-dismiss="modal">Confirm</button>
                            <button type="submit" class="btn btn-outline-secondary" >Reset</button>
                            <button type="button" class="btn btn-outline-primary" data-bs-dismiss="modal">Cancel</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>


    <script>
        const deleteGoodModal = document.getElementById('delete_good');
        deleteGoodModal.addEventListener('show.bs.modal', function (event) {
            const button = event.relatedTarget;
            const goodRow = button.getAttribute('data-bs-goodrow');
            const goodId = button.getAttribute('data-bs-goodid');
            const goodName = button.getAttribute('data-bs-goodname');
            const goodRowInput = document.getElementById("delete_good_row");
            const goodCurrent = document.getElementById("current_good_delete");
            goodRowInput.value = goodRow;
            goodCurrent.innerHTML = "Good's id: " + goodId + "<br>Good's name: " + goodName;
        })

        const editGoodModal = document.getElementById('edit_good');
        editGoodModal.addEventListener('show.bs.modal', function (event) {
            const button = event.relatedTarget;
            const goodRow = button.getAttribute('data-bs-goodrow');
            const goodId = button.getAttribute('data-bs-goodid');
            const goodName = button.getAttribute('data-bs-goodname');
            const goodRowInput = document.getElementById("edit_good_row");
            const goodCurrent = document.getElementById("current_good_edit");
            goodRowInput.value = goodRow;
            goodCurrent.innerHTML = "Good's id: " + goodId + "<br>Good's name: " + goodName;
        })
    </script>
</main>
</body>
</html>
